<template>
  <div style="width: 100%;overflow: scroll">
    <!--<p>查看统计数据</p>-->
    <div id="statistics" style="width: 100%;height: 500px;"></div>
    <!--<div id="statistics2" style="width: 100%;height: 500px;"></div>-->
  </div>
</template>

<script>
  var echarts = require('echarts/lib/echarts');
  // require('echarts/lib/chart/bar');
  // // 引入提示框和标题组件
  // require('echarts/lib/component/tooltip');
  // require('echarts/lib/component/title');

  export default {
    name: "statistics",
    mounted() {
      var myChart = echarts.init(document.getElementById('statistics'));
      var option = {
        title: {
          text: '筛查结果',
          left: 'center',
          // top: 'top',
          // textStyle:{
          //   // color: 'red',
          //   // align: 'right'
          // }
        },
        tooltip: {},
        xAxis: {
          // data: ["青光眼", "糖网病", "正常"]
          data: ["糖网病", "正常"]
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: [20, 498],
          barCategoryGap: '50%',
          itemStyle: {
            color: '#4ad2ff'
          },
          barWidth: '20%'
        }],
        grid: {
          left: '20%',
          right: '20%',
          bottom: '1%',
          containLabel: true
        },
        // barGap: 20%
        // title: {
        //   text: "统计结果",
        //   textStyle:{
        //     align: 'center',
        //     rich: {
        //       a: {
        //         // 没有设置 `align`，则 `align` 为 right
        //       }
        //     },
        //     color: 'red'
        //   }
        // }
      };
      myChart.setOption(option);
      myChart.on('mouseover', function (params) {
        console.log(params);
      });

      // var myChart2 = echarts.init(document.getElementById('statistics2'));
      // myChart2.setOption({
      //   series : [
      //     {
      //       name: '访问来源',
      //       type: 'pie',
      //       radius: '55%',
      //       itemStyle: {
      //         normal: {
      //           // 阴影的大小
      //           shadowBlur: 200,
      //           // 阴影水平方向上的偏移
      //           shadowOffsetX: 0,
      //           // 阴影垂直方向上的偏移
      //           shadowOffsetY: 0,
      //           // 阴影颜色
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       },
      //       data:[
      //         {value:400, name:'搜索引擎'},
      //         {value:335, name:'直接访问'},
      //         {value:310, name:'邮件营销'},
      //         {value:274, name:'联盟广告'},
      //         {value:235, name:'视频广告'}
      //       ]
      //     }
      //   ]
      // })
    }
  }
</script>

<style scoped>

</style>
